
<template>
    <div id="app">
        <!-- 全局ajax loading效果 -->
        <loading v-if="loadingShow"></loading>

        <!-- 头部 -->
        <navigation v-show="headerShow"></navigation>
        
        <!-- body 路由切换部分 -->
        <router-view class="router-view"></router-view>
        
        <!-- app底部 -->
        <foot></foot>
    </div>
</template>
<script type="text/javascript">
    //require("./assets/css/index.css");     //等价写法         
    import "../static/css/index.css"
    import Navigation from "./components/Navigation.vue"
    import Foot from './components/Footer.vue'
    //状态管理辅助函数可实现某个半自动化的机制将状态中的action state等映射组件上，
    //  就不需要在组件中使用this.$store手动操作action或者state啦。
    import {mapGetters, mapActions} from 'vuex'

    export default {
        name: 'App',
        data () {
            return {
                msg: 'Welcome to Your Vue.js App',
                newsList:[]
            }
        },   
        computed:mapGetters([   //这种写法使得整个computed本mapGetters占用，我这里暂时也没其他计算属性，就这么干
            'headerShow',
            'loadingShow'
        ]),
        methods:{        
            change:function($event){
                alert("我是本组件定义方法");
            },
            ...mapActions(["alert","showHeader","hideHeader"])
        },  
        watch:{
            $route(to,from){            
                if(to.path=='/userinfo'){
                    //this.$store.dispatch('hideHeader');
                    //  因为mapActions辅助函数产生的自动映射，hideHeader作为方法名又是字符串，我也懒得使用类型检查的写法
                    this.hideHeader();
                }else{
                    //实际上就这么直接调用我也没有感觉不好，相反语义上我倒是更能接受
                    this.$store.dispatch('showHeader');
                }
            }
        },
        components:{
          Navigation,
          Foot
        }  
    }
</script>
<style type="text/css" scoped>
    /*  @import './assets/css/index.css'; */
    /*  不推荐这种引用方式 */
</style>
